<template>
  <el-dialog
    :title="!dataForm.attrId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="属性名" prop="attrName">
      <el-input v-model="dataForm.attrName" placeholder="属性名"></el-input>
    </el-form-item>
    <el-form-item label="可检索" prop="searchType">
      <el-radio-group v-model="dataForm.searchType" >
        <el-radio :label="0" border>不可检索</el-radio>
        <el-radio :label="1" border>可检索</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="属性类型" prop="attrType">
      <el-radio-group v-model="dataForm.attrType" >
        <el-radio :label="0" border>销售属性</el-radio>
        <el-radio :label="1" border>基本属性</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- <el-form-item label="启用状态" prop="enable">
      <el-radio-group v-model="dataForm.enable" >
        <el-radio label="0" border>未启用</el-radio>
        <el-radio label="1" border>已启用</el-radio>
      </el-radio-group>
    </el-form-item> -->
    <el-form-item label="快速展示" prop="showDesc">
      <el-radio-group v-model="dataForm.showDesc" >
        <el-radio :label="0" border>不快速展示</el-radio>
        <el-radio :label="1" border>快速展示</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- <el-form-item label="可选值" prop="valueSelect">
      <el-input v-model="dataForm.valueSelect" placeholder="可选值"></el-input>
    </el-form-item> -->
    <el-form-item label="可多选" prop="valueType">
       <el-radio-group v-model="dataForm.valueType" >
        <el-radio :label="0" border>不可多选</el-radio>
        <el-radio :label="1" border>可多选</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- <el-form-item label="所属分类" prop="catelogId">
      <el-cascader
        v-model="dataForm.catelogId"
        :options="categorys" :props="props">
        </el-cascader>
    </el-form-item> -->
    <!-- <el-form-item label="属性分组" prop="attrGroupId">
      <el-select v-model="dataForm.attrGroupId" placeholder="请选择">
        <el-option
          v-for="item in groupList"
          :key="item.attrGroupId"
          :label="item.attrGroupName"
          :value="item.attrGroupId">
        </el-option>
      </el-select>
     
    </el-form-item> -->
    <!-- <el-form-item label="属性组内排序" prop="attrGroupSort" label-width="100px">
      <el-input v-model="dataForm.attrGroupSort" placeholder="属性组内排序"></el-input>
    </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
     props:["catId"],
    data () {
      return {
        visible: false,
        dataForm: {
          attrId: 0,
          attrName: '',
          searchType: '',
          attrType: '',
          showDesc: '',
          // valueSelect: '',
          valueType: '',
          catelogId: '',
          attrGroupId: '',
        },
        // props:{
        //   value:"catId",
        //   label:'name',
        //   children:"children"
        // },
        // 分组数据
        // groupList:[],
        // 级联菜单数据
        // categorys:[],
        dataRule: {
          attrName: [
            { required: true, message: '属性名不能为空', trigger: 'blur' }
          ],
          
        }
      }
    },
    // created(){
    //   this.getDataList()
    //   this.getGroupList()
    // },
    methods: {
      // 获取分组列表
      // async  getGroupList(){
      //   console.log(this.catId)
      // const {data:res} = await this.$http.get(`/dqxmall/prosysattrgroup/list/${this.catId}`)
      // // console.log(res)
      // this.groupList = res.page.list
      // },
      // 获取分类列表
    //   async  getDataList(){
    //   const {data:res} = await this.$http.get("/dqxmall/prosyscategory/list/tree")
    //   this.categorys = res.data
    // },
      init (id,data) {
        this.dataForm= {
          attrId: 0,
          attrName: '',
          searchType: '',
          attrType: '',
          showDesc: '',
          // valueSelect: '',
          valueType: '',
          // catelogId: '',
          // attrGroupId: ''
        },
        this.dataForm.attrId = id || 0
        this.visible = true
        if(this.dataForm.attrId){
          this.dataForm.attrName= data.attrName,
          this.dataForm.searchType= data.searchType,
          this.dataForm.attrType= data.attrType,
          this.dataForm.showDesc= data.showDesc,
          // this.dataForm.valueSelect= data.valueSelect,
          this.dataForm.valueType= data.valueType,
          this.dataForm.catelogId= this.catId
          // this.dataForm.attrGroupId= data.attrGroupId
        }
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate( async (valid) => {
          if (valid) {
            // 走修改逻辑
            if(this.dataForm.attrId){
              const {data:res} = await this.$http.post("/dqxmall/prosysattr/update",this.dataForm)
              console.log(res)
              if(res.msg === 'success'){
                this.$emit('updatedata');
                this.visible = false
                this.$message.success("修改成功")
              }
            }
            // 走新增逻辑
            else{
              var data={
                attrId: undefined,
                attrName: this.dataForm.attrName,
                searchType:  this.dataForm.searchType,
                attrType: this.dataForm.attrType,
                showDesc: this.dataForm.showDesc,
                // valueSelect: this.dataForm.valueSelect,
                valueType: this.dataForm.valueType,
                catelogId: this.catId,
                attrGroupId: this.dataForm.attrGroupId 
              }
              const {data:res} = await this.$http.post("/dqxmall/prosysattr/save",data)
              // console.log(res)
              if(res.msg = "success"){
                this.$emit('updatedata');
                this.visible = false
                this.$message.success("添加成功")
              }
            }
          }
        })
      }
    }
  }
</script>
